<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" title="我的团队" @clickLeft="leftBack" right-text="团队收益" @clickRight="rightText()" background-color="#318cff" color="#fff">
			<view slot="other">
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-30 dfj-t-white">
					<view class="dfj-flex-1 dfj-flex dfj-flex-ai-c">
						<view><image style="width: 100rpx;height: 100rpx;border-radius: 100%;" :src="infos.userInfo.headIcon || '/static/img/login.png'"></image></view>
						<view class="dfj-mg-l-20">
							<view class="dfj-f-30">{{ infos.userInfo.userName }}</view>
							<view class="dfj-mg-t-10"><text class="dfj-bg-warning dfj-f-20 dfj-pd-lr-15 dfj-pd-tb-5 dfj-bd-radius-20">推荐人 {{ infos.userInfo.recommendUserName }}</text></view>
						</view>
					</view>
					<view @click="toRecommendOpen"><text class="dfj-icon icon-ico" style="font-size: 80rpx;"></text></view>
				</view>
				<view class="order-tabs dfj-flex dfj-flex-ai-c dfj-t-c dfj-bg-white">
					<view v-for="(item,index) in tabs" @click="orderTab(index)" class="dfj-flex-1 dfj-pd-tb-20" :class="tabs_index == index?'dfj-bd-b-base dfj-t-base dfj-bd-w-4':''">{{ item }}</view>
				</view>
			</view>
		</uni-nav-bar>
		
		
		<view class="dfj-pd-30" style="margin-top: 230rpx;">
			<block v-for="(item,index) in list">
				<view class="dfj-bg-white dfj-bd-radius-20 dfj-flex dfj-flex-ai-c dfj-pd-20 dfj-mg-b-20">
					<view>
						<image style="width: 80rpx;height: auto;vertical-align: top;" mode="widthFix" :src="item.headIcon"></image>
					</view>
					<view class="dfj-flex-1 dfj-mg-l-30">
						<view class="dfj-mg-b-15 dfj-flex dfj-flex-ai-c">
							<view>{{ item.userName }}</view>
							<view class="dfj-mg-l-20">
								<image src="/static/img/my/ic_small_vip.png" v-if="item.isVip != 0" style="width: 50rpx;height: auto;" mode="widthFix"></image>
							</view>
						</view>
						<view class="dfj-flex dfj-flex-ai-c dfj-f-20">
							<view class="dfj-t-666 dfj-flex-1">邀请时间:{{ item.createDate }}</view>
							<view class="dfj-t-999">{{ item.mobilePhone }}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		
		<!-- 去推荐 -->
		<uni-popup ref="popup" type="bottom">
			<view class="dfj-bg-white dfj-bd-t-l-radius-30 dfj-bd-t-r-radius-30 dfj-overflow-hide">
				<view class="dfj-bg-base dfj-pd-lr-30 dfj-pd-tb-10 dfj-flex dfj-flex-ai-c dfj-t-white">
					<view class="dfj-flex-1 dfj-flex dfj-flex-ai-c">
						<image style="width: 80rpx;height: 80rpx;vertical-align: top;border-radius: 100%;" :src="infos.userInfo.headIcon || '/static/img/login.png'" /><text
						 class="dfj-mg-l-20">{{ infos.userInfo.userName }}</text>
					</view>
					<view>
						<text>邀请码:</text><text class="dfj-f-32 dfj-mg-lr-10">{{ infos.userInfo.sbm }}</text><text @click="copy(infos.userInfo.sbm)">(点我复制)</text>
					</view>
				</view>
		
				<view class="dfj-t-c dfj-pd-tb-40">
					<view>
						<canvas canvas-id="qrcode" style="width: 400rpx;height: 400rpx;margin: 0 auto;" />
						<!-- <image style="width: 400rpx;height: auto;" mode="widthFix" src="/static/img/my/ewm.png"></image> -->
					</view>
					<view class="dfj-t-999">扫一扫，注册东方集会员</view>
				</view>
		
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-b-40 dfj-t-333">
					<view class="dfj-t-c dfj-flex-1" @click="weChatShare('WXSceneSession')">
						<view>
							<image style="width: 70rpx;height: auto;" mode="widthFix" src="/static/img/my/weChat.png" />
						</view>
						<view>微信</view>
					</view>
					<view class="dfj-t-c dfj-flex-1" @click="weChatShare('WXSenceTimeline')">
						<view>
							<image style="width: 70rpx;height: auto;" mode="widthFix" src="/static/img/my/circle-of-friends.png" />
						</view>
						<view>朋友圈</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uQRCode from '@/utils/uqrcode.js'
	export default {
		data() {
			return {
				tabs: ['直推','间推'],
				tabs_index: 0,
				page: 1,
				list: [],
				infos: ''
			}
		},
		onLoad() {
			this.getCopperFans();
			this.infos = JSON.parse(localStorage.getItem('loginInfo'));
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			rightText() {
				uni.navigateTo({
					url: '/pages/my/group-benefits'
				})
			},
			getIronFans(){//间推
				this.$http({
					url: '/userOpt/getIronFans',
					data: {
						page: this.page,
						row: 15
					}
				}).then(res=> {
					if(res.data.list.length > 0){
						this.page++
						this.list.push(...res.data.list)
						
						let num = 0;
						this.list.map((item,index)=>{
							if(item.isValid == 1){
								num++
							}
						})
						this.tabs[1] = `间推${this.list.length}有效${num}`
					}
				})
			},
			getCopperFans(){//直推
				this.$http({
					url: '/userOpt/getCopperFans',
					data: {
						page: this.page,
						row: 15
					}
				}).then(res=> {
					if(res.data.list.length > 0){
						this.page++
						this.list.push(...res.data.list)
						let num = 0;
						this.list.map((item,index)=>{
							if(item.isValid == 1){
								num++
							}
						})
						this.tabs[0] = `直推${this.list.length}有效${num}`
					}
				})
			},
			orderTab(i) {
				this.tabs_index = i;
				if(this.tabs_index == 0){
					this.page = 1
					this.list = []
					this.getCopperFans()
				}else{
					this.page = 1
					this.list = []
					this.getIronFans()
				}
			},
			make() {
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.infos.userInfo.codeUrl + '?sbm=' + this.infos.userInfo.sbm,
					size: 215,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.defaults.correctLevel,
					success: res => {
						//console.log(res)
					}
				})
			},
			toRecommendOpen(){
				this.make();
			    this.$refs.popup.open()
			},
			weChatShare(scene) {
				uni.share({
				    provider: "weixin",
				    scene: scene,
				    type: 1,
				    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			copy(txt){
				uni.setClipboardData({
				    data: txt,
				    success: function () {
				        console.log('success');
				    }
				});
			}
		},
		onReachBottom() {
			if(this.tabs_index == 0){
				this.getIronFans()
			}else{
				this.getCopperFans()
			}
		}
	}
</script>

<style>
</style>
